<template>
	<div class="system-menu-container">
		<div class="breadcrumb-box">
			<Breadcrumb />
		</div>

		<div class="user-info-box flex space-between" v-if="state.detailData">
			<div class="user-info-left">
				<div class="img-box flex justify-center">
					<img :src="icon" alt="">
				</div>
				<div class="name">{{ state.detailData.patient.name }}</div>
				<div class="btn-box flex justify-center">
					<el-button size="default" type="primary" plain round @click="goLog()" style="width: 88px;">日志</el-button>
				</div>
		
			</div>
			<div class="sp-line"></div>
			<div class="user-info-right">
				<div class="info-top">
					<div class="info-item">
						<span class="item-tit">性别：</span>
						<span class="item-con">{{ sexObj[state.detailData.patient.gender] }}</span>
					</div>
					<div class="info-item">
						<span class="item-tit">年龄：</span>
						<span class="item-con">{{ state.detailData.age || '-' }}</span>
					</div>
				</div>
				<div class="info-center">
					<div class="info-item">
						<span class="item-tit">入院病区：</span>
						<span class="item-con">{{ state.detailData.hospitalArea?state.detailData.hospitalArea.name:'-' }}</span>
					</div>
					<div class="info-item">
						<span class="item-tit">入院诊断：</span>
						<span class="item-con">{{ state.detailData.preDiagnosis }}</span>
					</div>
					<div class="info-item">
						<span class="item-tit">就诊科室：</span>
						<span class="item-con">{{ (state.detailData.operation && state.detailData.operation.department) ? state.detailData.operation.department.departmentName:'-'  }}</span>
					</div>
					<div class="info-item">
						<span class="item-tit">主刀医生：</span>
						<span class="item-con">{{ (state.detailData.operation && state.detailData.operation.chiefDoctor) ? state.detailData.operation.chiefDoctor.name:'-'  }}</span>
					</div>
					<div class="info-item">
						<span class="item-tit">医生电话：</span>
						<span class="item-con">{{ (state.detailData.operation && state.detailData.operation.chiefDoctorPhone) ? state.detailData.operation.chiefDoctorPhone:'-'  }}</span>
					</div>
				</div>
				<div class="info-bottom">
					<div class="info-item">
						<span class="item-tit">执行手术：</span>
						<span class="item-con">{{ (state.detailData.operation && state.detailData.operation.operation) ? state.detailData.operation.operation.name:'-'  }}</span>
					</div>
					<div class="info-item">
						<span class="item-tit">部位：</span>
						<span class="item-con">{{ (state.detailData.operation && state.detailData.operation.position) ? state.detailData.operation.position:'-'  }}</span>
					</div>
					<div class="info-item">
						<span class="item-tit">侧别：</span>
						<span class="item-con">{{ (state.detailData.operation && state.detailData.operation.direction) ? state.detailData.operation.direction:'-'  }}</span>
					</div>
					<div class="info-item">
						<span class="item-tit">麻醉方式：</span>
						<span class="item-con">{{ (state.detailData.anesthesiaAssessment && state.detailData.anesthesiaAssessment.anesthesiaMode) ? state.detailData.anesthesiaAssessment.anesthesiaMode.name:'-'}}</span>
					</div>
					<div class="info-item">
						<span class="item-tit">登记号：</span>
						<span class="item-con">{{ state.detailData.recordId }}</span>
					</div>
				</div>
			</div>

			<div>
				<el-button size="default" type="primary"   @click="goInfo()" style="width: 88px;">诊疗信息</el-button>
			</div>
		</div>

		<div class="page-main flex space-between">
			<div class="detail-l">
				<div class="status-list">
					<div class="status-item flex space-between align-center" v-for="(item,index) in state.statusList" :key="index" @click="changeStatus(item.name)" :class="state.activeStatus == item.name?'active':''">
						<div>
							<SvgIcon class="icon" :name="item.icon"  />
							<span class="name">{{ item.name  }} </span>
						</div>

						<SvgIcon v-if="item.finished" class="success-icon" name="ele-Check"  />
					</div>
				</div>
			</div>
			<div class="detail-r">
				<div v-if="state.activeStatus == '日间申请'" >
					<ApplyDaily :datas="state.detailData" @refresh="getDetail()" />
				</div>
				<!-- 手术预约 -->
				<div v-if="state.activeStatus == '手术预约'" >
					<OperationOrder :datas="state.detailData" />
				</div>

				<div v-if="state.activeStatus == '中心核对'" >
					<CenterCheck :datas="state.detailData" />
				</div>

				<div v-if="state.activeStatus == '入院前宣教'" >
					<BeforeEdu :datas="state.detailData" />
				</div>

				<div v-if="state.activeStatus == '出院评估'" >
					<LeaveAssess :datas="state.detailData" />
				</div>
				
				<div v-if="state.activeStatus == '退出日间'" >
					<ExitDaytime :datas="state.detailData"  />
				</div>

				<div v-if="state.activeStatus == '患者360视图'" >
					<div class="com-box">
						<div class="common-title">
							患者360视图
						</div>
					</div>

					<div class="iframe-box">
						<iframe v-if="state.recordUrl" :src="state.recordUrl" frameborder="0" style="width:100%;height: 800px;"></iframe>
						<div v-else>
							<el-empty description="暂无患者360视图" />
						</div>
					</div>
					
				</div>
			
			</div>
		</div>

		<logDialog ref="logDialogRef"  />
	</div>
</template>

<script setup name="dsProcess-patientDetail">
import { dsApi } from '/@/api/ds/index';
import { usePatientDetail } from '/@/stores/patientDetail';
import { storeToRefs } from 'pinia'
import icon from '/@/assets/meow.png';
const logDialog = defineAsyncComponent(() => import('./components/logDialog.vue'));

const stores = usePatientDetail();
const {  sexObj  } = storeToRefs(stores);
// 引入组件
const Breadcrumb = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/breadcrumb.vue'));
const ApplyDaily = defineAsyncComponent(() => import('./components/applyDaily.vue'));
const OperationOrder = defineAsyncComponent(() => import('./components/operationOrder.vue'));
const CenterCheck = defineAsyncComponent(() => import('./components/centerCheck.vue'));
const BeforeEdu = defineAsyncComponent(() => import('./components/beforeEdu.vue'));
const LeaveAssess = defineAsyncComponent(() => import('./components/leaveAssess.vue'));
const ExitDaytime = defineAsyncComponent(() => import('./components/exitDaytime.vue'));
const logDialogRef = ref()

// 定义变量内容
const state = reactive({
	detailId: null,
	detailLoading: false,
	detailData: null,
	statusList: [
		{
			name: '日间申请',
			icon: 'ele-Checked',
			finished: true
		},
		{
			name: '手术预约',
			icon: 'ele-Operation',
			finished: false
		},
		{
			name: '中心核对',
			icon: 'ele-Operation',
			finished: false
		},
		{
			name: '入院前宣教',
			icon: 'ele-Operation',
			finished: false
		},
		{
			name: '出院评估',
			icon: 'ele-Operation',
			finished: false
		},
		{
			name: '退出日间',
			icon: 'ele-Operation',
			finished: false
		},
		{
			name: '患者360视图',
			icon: 'ele-Operation',
			finished: false
		},
	],
	activeStatus:'日间申请',
	recordUrl: ''
});


const route = useRoute();

// 页面加载时
onMounted(() => {
	state.detailId = route.query.id
	getDetail()
	getUrl()
});

const goLog = () => {
	logDialogRef.value.openDialog(state.detailData);
}

const goInfo = () => {

}

const changeStatus = (value) => {
	state.activeStatus = value
}

const getDetail = () => {
	state.detailLoading = true
	dsApi().recordDetail({prid:state.detailId}).then(res=>{
		state.detailLoading = false
		state.detailData = res.data
		changeStatusIcon()
	}).catch(() => {
		state.detailLoading = false
	})
}

const getUrl = () => {
	dsApi().getMedicalRecordUrl({prid:state.detailId}).then(res=>{
		state.recordUrl = res.data.url
	}).catch(() => {
		state.recordUrl = ''
	})
}

const changeStatusIcon = () => {
	// 手术预约
	if(state.detailData.operation && state.detailData.operation.operationAt){
		state.statusList[1].finished = true
	}
	if(state.detailData.centreCheck && state.detailData.centreCheck.checkStatus == 3){
		state.statusList[2].finished = true
	}
	if(state.detailData.preoperativeEducation){
		state.statusList[3].finished = true
	}
	if(state.detailData.dischargeProblemAnswer && state.detailData.dischargeProblemAnswer.length > 0){
		state.statusList[5].finished = true
	}
}


</script>

<style lang="scss" scoped>
.user-info-box{
	width: 100%;
	height: 160px;
	background-color: #fff;
	padding: 10px;
	padding-left: 0;
	.user-info-left{
		width: 188px;
		.img-box{
			img{
				width: 53px;
				height: 53px;
				border-radius: 53px;
			}
		}

		.name{
			color: #333;
			font-size: 16px;
			text-align: center;
			margin-top: 10px;
		}
		.btn-box{
			margin-top: 20px;
		}
	}
	.sp-line{
		width: 1px;
		height: 95%;
		background-color: #E8E8E8;
	}
	.user-info-right{
		width: calc(100% - 190px - 90px);
		padding: 20px;
		.info-top,
		.info-center,
		.info-bottom{
			display: grid;
			grid-template-columns: repeat(5,1fr);
			.item-tit{
				color: #666;
			}
			.item-con{
				color: #333;
			}
		}

		.info-top,
		.info-center{
			margin-bottom: 20px;
		}
		
	}
	
}

.page-main{
	// min-height: 700px;
	padding: 10px;
	.detail-l{
		width: 170px;
		background-color: #fff;
		border-radius: 6px;
		padding: 20px;
		.status-list{
			.status-item{
				height: 35px;
				line-height: 35px;
				color: #777777;
				margin-bottom: 10px;
				border-radius: 3px;
				padding: 0 8px;
				cursor: pointer;
				font-size: 15px;
				&.active{
					background-color: rgba(240, 248, 255, 1);
					color: #409EFF;
					font-weight: bold;
				}
				.icon{
					transform: translateY(2px);
				}
				.name{
					margin-left: 10px;
				}
				.success-icon{
					color: #81B337;
				}
			}
		}
	}
	.detail-r{
		width: calc(100% - 170px - 10px);
		height: 100%;
		background-color: #fff;
		border-radius: 6px;
		padding: 10px;
	}
}
</style>
